<template>
  <div
    :class="['m-ctvideo', 'z-active', 'z-pause']"
    v-if="videoData"
    ref="playBox"
  >
    <!-- 整个播放盒子 -->
    <div class="player" @click.stop="VideoPlay(!play_status)">
      <video class="media" :src="videoData.url" ref="videoBox"></video>
      <!-- 播放前的图片遮罩 -->
      <div class="poster ffull" v-show="shelter_flag">
        <img
          class="j-pic pic"
          :src="imgURL"
        />
      </div>
      <!-- 屏幕中间播放按钮 -->
      <div :class="['play'  , 'ffull',{'play_hiden' : anewFlag}]" v-show="play_status">
        <a href="javascript:;" :class="['icn', { icn_max: max_flag }]"></a>
      </div>
      <!-- 播放的加载图标 -->
      <span class="loading" v-show="login_flag"></span>
      <!-- 重新播放按钮 -->
      <div :class="[{'layer ':anewFlag} , 'ffull']" v-show="anewFlag">
        <div class="fvhc">
          <a href="javascript:;" class="icn top" @click.stop="anew"></a>
          <span class="bottom">重播</span>
        </div>
      </div>
      <!-- 全屏播放后的点赞转发选项 -->
      <div class="opbar"></div>
    </div>
    <!-- 下面的进度条盒子 -->
    <div :class="['controls', { controls_max: max_flag }]">
      <div class="wrap">
        <!-- 音量 窗口大小 相关选项 -->
        <div :class="['j-right', 'right', { right_max: max_flag }]">
          <div :class="['duration', 'ffl', { duration_max: max_flag }]">
            {{videoTime}}
          </div>
          <div :class="['volume', { volume_max: max_flag }, 'ffl']">
            <a href="javascript:;" class="j-mute mute"></a>
          </div>
          <div class="brs ffl">
            <div :class="['current', { current_max: max_flag }]">
              <span class="j-label label">超 清</span>
            </div>
            <ul :class="['j-options', { options: max_flag }]">
              <li></li>
            </ul>
          </div>
          <a
            :class="['full', ' ffr', { full_max: max_flag }]"
            href="javascript:;"
            @click.stop="max"
          ></a>
        </div>
        <!-- 进度条及播放 -->
        <div :class="['foh', { foh_max: max_flag }]">
          <!-- 播放按钮 -->
          <div :class="['j-left', 'left', { left_max: max_flag }]">
            <span :class="['time', { time_max: max_flag }]"
              >{{ vldeoChange_Time }}
            </span>
            <a
              :class="['play', { play_max: max_flag }, 'ffl']"
              href="javascript:;"
              v-if="play_status"
              @click.stop="VideoPlay(0)"
            ></a>
            <a
              :class="['stop', { stop_max: max_flag }, 'ffl']"
              href="javascript:;"
              v-if="!play_status"
              @click.stop="VideoPlay(1)"
            ></a>
          </div>
          <!-- 进度条盒子 -->
          <div class="j-progress progresswrap">
            <div
              class="progress"
              @mousemove="move"
              ref="progressBox"
            >
              <!-- 进度条上面的数字进度框 -->
              <div class="j-ht" :style="{ left: left + 'px' }">
                <span class="hovertime">{{scrollChsngrTime}} </span>
                <span class="arrow" :style="{ left: arrowLeft + 'px' }"></span>
              </div>
              <!-- 进度条 -->
              <div
                class="j-out1 out out-1"
                :style="{ width: progressWidth + '%' }"
              >
                <span class="dot" @mousedown.stop="DotDown"></span>
              </div>
              <!-- 加载进度条 -->
              <div class="j-out2 out out-2" :style="{ width: cache_bar + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { video_url , MVurl} from "../../network/video";
export default {
  props:['itemData'],
  data() {
    return {
      video: false, //整个页面
      imgURL:null,
      login_flag: true, //加载图标
      shelter_flag: true, //遮罩层
      max_flag: false, //点击视频变大
      play_status: 1, //播放和暂停的状态
      videoTime:'00:00', //视频的时长
      left: 0, //数字进度框的左右位移度数
      duration:null , //音乐的总时长
      scrollChsngrTime:"00:00", //数字进度框的左右位移的视频时间节点
      arrowLeft: 0, //数字进度框双面小箭头的左右位移度数
      progressWidth: 0, //进度条前进的度数
      cache_bar:0,
      vldeoChange_Time: "00:00", //视频播放时变动的事件
      ud:true,     //当拖拽进度条时禁止视频变动事件
      anewFlag:false, //重新播放按钮
      videoData:null,
    };
  },
  methods: {
    //获取videoURL
    res_videoURL(id) {
      video_url(id).then((res) => {
         var obj = {}
         obj.needPay =res.data.urls[0].needPay
         obj.id = res.data.urls[0].id
         obj.url = res.data.urls[0].url
         this.videoData = obj
        console.log(res)
        this.$nextTick(() => {
          if (this.$refs.videoBox.src) {
            this.startVideo();
          }
        });
      });
    },
    //获取MVurl
    res_mvURL(id){
      MVurl(id).then((res) => {
        var obj = {}
        obj.MVfee = res.data.data.mvFee
        obj.id = res.data.data.id,
        obj.url = res.data.data.url
        this.videoData = obj
        this.$nextTick(() => {
          if (this.$refs.videoBox.src) {
            this.startVideo();
          }
        });
      });
    },
    //开始播放前的准备
    startVideo() {
      var that = this;
      this.$refs.videoBox.addEventListener("loadedmetadata", function () {
        that.login_flag = false;
        that.shelter_flag = false;
        that.videoTime =  that.setTime(this.duration)
        that.duration = this.duration
        that.VideoPlay(0);
        that.setscrollbar();
        console.log("可以播放了");
      });
    },
    setscrollbar() {
      //滚动条 向前滚动【3】
      var that = this;
      this.$refs.videoBox.addEventListener("timeupdate", function () {
        if(this.buffered.length != 0){
               that.cache_bar = (this.buffered.end(0)/this.duration)*100
            }
         if(that.ud){
            that.vldeoChange_Time = that.setTime(this.currentTime);
            that.progressWidth =  (this.currentTime / that.duration) * 100
         }
      });
    },
    VideoPlay(flag) {
      //播放  false停止图标，视频播放  true开始图标，视频暂停
     if( this.anewFlag ) return  //如果当前是重新播放 点击播放按钮无用
      this.play_status = flag
      if (this.play_status) {
        this.$refs.videoBox.pause();
      } else {
        this.$refs.videoBox.play();
      }
    },
    move(e) {
      //鼠标移动在进度条上 时间进度盒子的移动
      var left = Math.round(this.$refs.progressBox.getBoundingClientRect().left);
      var width = this.$refs.progressBox.offsetWidth;
      this.scrollChsngrTime= this.setTime((this.duration/width) * (e.pageX - left))
      this.left = e.pageX - left - 22;
      if (this.left <= 0) {
        this.arrowLeft = e.pageX - left - 22 < -15 ? -15 : e.pageX - left - 22;
        this.left = 0;
      } else if (this.left > width - 44) {
        this.left = width - 44;
        this.arrowLeft =
          e.pageX - left - this.left - 22 > 14 ? 14: e.pageX - left - this.left - 22;
      }
    //   console.log(this.left)
    },
    down(e) {
        //当鼠标在进度条上按下 到指定的视频节点
      var left = Math.round(this.$refs.progressBox.getBoundingClientRect().left);
      var width = this.$refs.progressBox.offsetWidth;
      var num = ((e.pageX - left) / width) * 100;
      this.$refs.videoBox.currentTime = this.duration / 100  * num
      this.progressWidth = num.toFixed(4);  
    },
    DotDown(e){
      //鼠标在滚动条上拖拽
    var that = this
    this.ud = false
    var left = Math.round(this.$refs.progressBox.getBoundingClientRect().left);
     var width = this.$refs.progressBox.offsetWidth;
     var LF = null
      document.onmousemove =function (e){
         e.stopPropagation()
         LF = e.pageX -left
        if(LF< 0){
            LF = 0
        }else if(LF > width){
            LF = width
        }
        that.progressWidth = (LF/width)*100
      }
      document.onmouseup = function(e){
          that.$refs.videoBox.currentTime = (that.duration/width) * LF //将音乐节点重置到某个位置
          that.anewFlag = false //解开重复状态
          that.VideoPlay(0)  //开始播放
           document.onmousemove = document.onmouseup = null;  //清除事件
          that.ud = true
      }
    },
    anew(){
      //重复播放
       this.anewFlag = false
       this.VideoPlay(0)
    },
    max() {
      //点击放大按钮 全屏化
      this.max_flag = !this.max_flag;
      if (this.max_flag) {
        this.$refs.playBox.webkitRequestFullScreen();
      }
      if (!this.max_flag) {
        document.webkitCancelFullScreen();
      }
    },
    setTime(time) {
      //转换时间函数【4】
      let min =  Math.floor(time / 60).toFixed(0) > 10 ? Math.floor(time / 60).toFixed(0) : "0" + Math.floor(time / 60).toFixed(0); // 分钟
      let second = time % 60 > 9 ? time % 60 : "0" + (time % 60); // 秒数
      let length = (min + ":" + second).slice(5);
      return (min + ":" + second).replace(length, " ");
    },
  },
  watch:{
    progressWidth(value){
      if(value == 100){
         this.$refs.videoBox.currentTime = 0
        this.play_status = true 
        this.anewFlag = true  //歌曲完毕进入重复状态
      }
    }
  },
  created() {
    if(this.itemData && this.itemData.type == 21){
       this.res_mvURL(this.itemData.program.mv.id)
       this.imgURL = this.itemData.program.mv.imgurl
    }
    if(this.itemData && this.itemData.type == 41){
      this.res_videoURL(this.itemData.program.video.videoId)
      this.imgURL = this.itemData.program.video.coverUrl
    }
    // this.res_videoURL("91606EA66B00B1403E57C3684D86CBA3");
    console.log(this.imgURL)
  },
  mounted() {
    //监听video全屏/退出全屏
    var that = this;
    document.addEventListener("webkitfullscreenchange", function (e) {
      if (!document.fullscreenElement) {
        that.max_flag = false;

      }
    });
  },
};
</script>

<style scoped>
.m-ctvideo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 1.42857;
  color: #fff;
  overflow: hidden;
}
.m-ctvideo .player {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.m-ctvideo .player .media {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}
video {
  object-fit: contain;
}
.m-ctvideo .ffull {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
}
.m-ctvideo .poster {
  background: rgba(0, 0, 0, 0.1);
}

img,
.txt {
  border: 0;
}
.m-ctvideo .poster .pic {
  display: block;
  width: 100%;
  height: 100%;
}
.m-ctvideo.z-pause .player .play {
  opacity: 1;
}
.m-ctvideo.z-pause .player .play_hiden {
  opacity: 0;
}
.m-ctvideo .player .play .icn {
  display: block;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  margin-top: -37px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("");
}
.m-ctvideo.z-fullscreen .player .play .icn_max {
  background-image: url();
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
}
.m-ctvideo .player .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  margin-top: -12px;
  margin-left: -12px;
  background: url("../../assets/imgs/Mvloding.png") no-repeat;
  animation: 2s linear infinite forwards video-loading-spin;
}
@keyframes video-loading-spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.m-ctvideo .player .opbar {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/* .m-ctvideo.z-fullscreen .player .opbar {
    display: none;
    z-index: 1;
} */
.m-ctvideo.z-fullscreen.z-active .player .opbar_block {
  display: block;
}
.m-ctvideo .controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 42px;
  transition: transform 0.2s ease-in;
}
.m-ctvideo.z-fullscreen .controls_max {
  height: 59px;
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.m-ctvideo.z-active .controls {
  transform: translateY(0);
}
.m-ctvideo .controls::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 79px;
  background: url("")
    repeat-x;
}
.m-ctvideo .controls .wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.m-ctvideo .controls .wrap .right {
  float: right;
}
.m-ctvideo.z-fullscreen .controls .wrap .right_max {
  margin-top: 9px;
}
.m-ctvideo .ffl {
  float: left;
}
.m-ctvideo .ffr {
  float: right;
}
.m-ctvideo .controls .wrap .duration,
.m-ctvideo .controls .wrap .time {
  height: 34px;
  margin: 0;
  line-height: 34px;
  color: rgba(255, 255, 255, 0.5);
  position: static;
}
.m-ctvideo.z-fullscreen .controls .wrap .duration_max {
  margin-right: 18px;
}
.m-ctvideo .controls .wrap .volume {
  position: relative;
  margin-left: 10px;
  margin-right: 1px;
  padding: 11px 10px;
}
.m-ctvideo.z-fullscreen .controls .wrap .volume_max {
  right: 10px;
}
.m-ctvideo .controls .wrap .volume .mute {
  cursor: pointer;
  display: block;
  width: 16px;
  height: 12px;
  background: url()
    no-repeat center center;
}
.m-ctvideo .controls .wrap .volume .mute:hover {
  background-image: url();
}
.m-ctvideo .controls .wrap .brs {
  position: relative;
  width: 50px;
  height: 17px;
  margin-top: 9px;
  z-index: 3;
}
.m-ctvideo .controls .wrap .brs::after {
  right: 0;
}
.m-ctvideo .controls .wrap .brs::after,
.m-ctvideo .controls .wrap .brs::before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
}
.m-ctvideo .controls .wrap .brs .current {
  line-height: 17px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}
.m-ctvideo.z-fullscreen .controls .wrap .brs .current_max {
  margin-left: -6px;
}
.m-ctvideo .controls .wrap .brs .options {
  display: none;
  position: absolute;
  top: -13px;
  left: -8px;
  width: 66px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-100%);
}
.m-ctvideo.z-fullscreen .controls .wrap .brs .options {
  left: -12px;
}
.m-ctvideo .controls .wrap .full {
  display: block;
  width: 34px;
  height: 34px;
  background: url("")
    no-repeat center;
}
.m-ctvideo .controls .wrap .full:hover {
  background-image: url();
}
.m-ctvideo.z-fullscreen .controls .wrap .full_max {
  background-image: url("");
  width: 48px;
}
.m-ctvideo.z-fullscreen .controls .wrap .full_max:hover {
  background-image: url();
}
.m-ctvideo .foh {
  overflow: hidden;
  position: relative;
  top: -20px;
}
.m-ctvideo.z-fullscreen .foh_max {
  top: -8px;
}
.m-ctvideo .controls .wrap .left {
  float: left;
  position: relative;
  top: 20px;
}
.m-ctvideo.z-fullscreen .controls .wrap .left_max {
  top: 7px;
}
.m-ctvideo.z-fullscreen .controls .wrap .time_max {
  height: 52px;
  line-height: 52px;
}

.m-ctvideo .controls .wrap .play {
  width: 34px;
  height: 32px;
  margin: 0 6px;
  background: url("")
    no-repeat center;
}
.m-ctvideo .controls .wrap .play:hover {
  background-image: url("");
}
.m-ctvideo.z-fullscreen.z-active .wrap .play_max {
  width: 52px;
  height: 50px;
  background: url("")
    no-repeat center;
  margin: 0 10px;
}
.m-ctvideo.z-fullscreen.z-active .wrap .play_max:hover {
  background-image: url();
}
.m-ctvideo .controls .wrap .stop {
  width: 34px;
  height: 32px;
  margin: 0 6px;
  background: url("")
    no-repeat center;
}
.m-ctvideo .controls .wrap .stop:hover {
  background-image: url();
}
.m-ctvideo.z-fullscreen.z-active .wrap .stop_max {
  width: 52px;
  height: 50px;
  background: url("")
    no-repeat center;
  margin: 0 10px;
}
.m-ctvideo.z-fullscreen.z-active .wrap .stop_max:hover {
  background-image: url();
}
.m-ctvideo .controls .progresswrap {
  position: relative;
  height: 35px;
  padding: 15px 10px 0;
  overflow: hidden;
}
.m-ctvideo .controls .progress {
  position: relative;
  top: 20px;
  width: auto;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  user-select: none;
}
.m-ctvideo .controls .progress:hover .j-ht {
  display: block;
}
.m-ctvideo .controls .progress .j-ht {
  display: none;
  position: absolute;
  top: -27px;
  min-width: 44px;
}
.m-ctvideo .controls .progress .j-ht .hovertime {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
}
.m-ctvideo .controls .wrap .arrow {
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 7px;
  background: url()
    no-repeat;
  background-position: center top;
  cursor: default;
}
.m-ctvideo .controls .progress .out {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
}
.m-ctvideo .controls .progress .out-1 {
  background-color: #b2072a;
  z-index: 2;
}
.m-ctvideo .controls .progress .dot {
  position: absolute;
  top: -10px;
  right: -12px;
  display: block;
  width: 24px;
  height: 24px;
  background: url()
    no-repeat center;
}
.m-ctvideo .controls .progress .out-2 {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

.m-ctvideo .player .layer {
    height: auto;
    background: rgba(0, 0, 0, 0.7);
}
.m-ctvideo .fvhc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.m-ctvideo .player .layer .fvhc .icn {
    position: relative;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
}
.m-ctvideo .player .layer .fvhc .icn {
    width: 74px;
    height: 74px;
    background-image: url();
}
.m-ctvideo .player .layer .fvhc .icn:hover {
    background-image: url();
}
.m-ctvideo .player .layer .fvhc .bottom {
    position: static;
    display: inline-block;
    width: auto;
    height: 26px;
    padding: 0 10px;
    margin-top: 8px;
    line-height: 26px;
    font-size: 14px;
    color: #a5a7a8;
}
</style>